<template>
  <div class="outBox">
    <div v-for="item in historyItem" :key="item.id" style="width: 50%">
      <div class="box" @click="goBlog(item)">
        <h3>{{ item.blogName }}</h3>
        <p>{{ time(item.closeTime) }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { formatTime } from "../../../formatTime";
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { mineType } from "@/type/mine";
import $axios from "@/http";
const $router = useRouter();
const $store = useStore();
const historyItem = ref<Array<mineType>>([]);
onMounted(() => {
  ifCurrentBlogHasGood();
});
const time = computed(() => {
  return function (item: string) {
    return formatTime(item);
  };
});
const goBlog = (item: mineType) => {
  $router.push("/detail/" + item.blogId);
};
const ifCurrentBlogHasGood = () => {
  $axios
    .post("/history/search", {
      username: $store.getters.user.username,
    })
    .then((res) => {
      console.log(res);
      if (res.data.error === -1) {
        //说明当前博客已被收藏
        historyItem.value = res.data.data;
      } else {
        historyItem.value = [];
      }
    });
};
</script>

<style lang="scss" scoped>
.outBox {
  display: flex;
  flex-wrap: wrap;
  .box {
    // width: 50%;
    margin: 15px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.4);
    transition: all 0.2s;
    &:hover {
      box-shadow: 0 3px 7px rgba(3, 3, 3, 0.3);
      transform: translateY(-5px) scale(1.02);
    }
    h3 {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    p {
      font-weight: 200;
      font-size: 13px;
      color: rgba(3, 3, 3, 0.5);
    }
  }
}
</style>
